<template>
  <el-container>
    <el-header>
      <Title :title="titleName" :SecTitle="SecTitleName"></Title>
    </el-header>
    <el-main :style="styleMain">
      <el-row>
        <el-col>
          <el-form :inline="true" :model="form1">
            <el-form-item >
              <div class="block">
                <span class="demonstration">时间</span>
                <el-date-picker
                  v-model="form1.time"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                  style="margin-left:12px"
                  
                >
                </el-date-picker>
              </div>
            </el-form-item>

            <el-form-item label="订单" :style="styleMl_20">
              <el-input v-model="form1.orders" placeholder="请输入编号">
              </el-input>
            </el-form-item>

            <el-form-item label="用户" :style="styleMl_20">
              <el-input v-model="form1.name" placeholder="请输入姓名"> </el-input>
            </el-form-item>

            <el-form-item label="陪护员" :style="styleMl_20">
              <el-input v-model="form1.Escort" placeholder="请输入陪护员"> </el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="form1.state" placeholder="请选择">
                <el-option
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :style="styleMl_20">
              <el-button type="success" @click="search"> 筛选 </el-button>
              
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-table :data="RIDatas" >
            <el-table-column label="订单编号" prop="orderNo"> </el-table-column>
            <el-table-column label="申请时间" prop="applyTime" width="200%"> 
            <template slot-scope="scope">
                {{goTime(scope.row.applyTime)}}
            </template>
            </el-table-column>
            <el-table-column label="ID" prop="userId"> </el-table-column>
            <el-table-column label="姓名" prop="name"> </el-table-column>
            <el-table-column label="退款金额" prop="price"> </el-table-column>
            <el-table-column label="服务类型" prop="serviceType"> </el-table-column>
            <el-table-column label="陪护员" prop="escortsName" > </el-table-column>
            <el-table-column label="处理时间" prop="dealTime"  width="200%">
              <template slot-scope="scope">
                  {{goTime(scope.row.dealTime)}}
              </template>
               </el-table-column>
            <el-table-column label="状态" prop="refundStatus" >
              <template slot-scope="scope">
                  {{getRefundStatus(scope.row.refundStatus)}}
              </template>
               </el-table-column>

            <el-table-column label="操作" width="80%">
              <!-- 查看 -->
                 <template slot-scope="scope">
                      <el-button type="text" @click="dialogTableVisible = true;handleClick(scope.row)">查看</el-button>
                  </template> 
            
            </el-table-column>
          </el-table>
            <!-- //查看弹出框 -->
              <el-dialog title="查看" :visible.sync="dialogTableVisible" center>
                  <el-table
                      :show-header="false"
                      :data="tableData"
                      style="width: 100%;"
                      >
                      <el-table-column prop="name" align="right" width="200%">
                      </el-table-column>
                      <el-table-column prop="data">
                      </el-table-column>
                  </el-table>
                      <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogTableVisible = false">返回</el-button>
                      </div>
              </el-dialog>
        </el-col>
      </el-row>
    </el-main>
    <el-footer :style="styleMain">
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>     
    </el-footer>
  </el-container>
</template>

<script>
import Title from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";
export default {
  data: function () {
    return {
      //标题
      titleName:'退款管理',
      SecTitleName:'退款介入',
      //主体
      styleMain:{
        padding:"20px 0px",
      },
      styleMl_20:{
        marginLeft:'20px',
      },
      total:5,
      pagesize:4,
      currentPage:1,
      dialogTableVisible: false,
      // time:'',
    // 搜索栏---------
      form1: {
        time:"",
        orders: "",
        name: "",
        Escort: "",
        state: "",
      },
      stateOptions: [
        {
          value: "0",
          label: "微信",
        },
        {
          value: "1",
          label: "支付宝",
        },
        {
          value: "2",
          label: "免支付",
        },
        {
          value: "3",
          label: "平台",
        },
      ],
    //页面table------------------
      RIDatas: [
        {
          orderNo:  '',
          applyTime: '',
          id:  '',
          name:  '',
          price:  '',
          serviceType:  '',
          escortsName: '',
          dealTime:  '',
          refundStatus:  '',
          refundWhy:  '',
          userId:  '',
        }
       
      ],
    //查看页面
    viewData:{
        orderNo: "CJR2139987",
        applyTime: "2018-11-08 19:22:09",
        id: "CJR-001",
        name: "张思",
        price: "38",
        serviceType: "理发",
        escortsName: "李思",
        refundWhy:'服务不行',
        refundStatus:'待处理',
        dealTime:'2018-11-08 19:22:09',
        // dealresults:'-'
    },
    };
  },
  computed: {
    //因为数据用到了dataform中的数据，所以写在了computed中
    tableData() {
        return [{
              name: "订单编号",
              data: this.viewData.orderNo
            },
            {
                name: "申请时间",
                data: this.viewData.applyTime
            },
            {
                name: "ID",
                data: this.viewData.id
            },
            {
                name: "姓名",
                data: this.viewData.name
            },
            {
                name: "服务类型",
                data: this.viewData.serviceType
            },
            {
                name: "退款金额",
                data: this.viewData.money
            },
            {
                name: "陪护员",
                data: this.viewData.escortsName
            },
            {
                name: "退款原因",
                data: this.viewData.refundWhy
            },
            {
                name: "状态",
                data: this.viewData.refundStatus
            },
            {
                name: "处理时间",
                data: this.viewData.dealTime
            },
            // {
            //     name: "处理结果",
            //     data: this.viewData.dealresults
            // }
        ]
    },
		},
  components: {
    Title,
    Paging,
  },
  created(){
    //页面更新
   this.update()
  },
  methods: {
    //页面更新
    update(){
       //页面更新访问后台获取table数据
    this.axios.post("/refund/list",{
      page: this.currentPage,
      pageSize: this.pagesize
    },)
    .then((res)=>{
      // console.log(res.data.data);
    this.RIDatas=res.data.data
    this.total=res.data.count

    })
    .catch((err)=>{
      console.log('页面更新访问后台获取table数据',err)
    })
    },
    //筛选
    search() {
      console.log(this.form1);
       this.axios.post("/refund/list",
       {
        applyTime: this.form1.time,
        orderNo: this.form1.orders,
        name: this.form1.name,
        escortsName: this.form1.Escort,
        refundStatus: this.form1.state,
        page: this.currentPage,
        pageSize: this.form1.pagesize,
    },)
    .then((res)=>{
    console.log(res.data.data);
    this.total=res.data.count
    this.RIDatas=[]
    this.RIDatas=res.data.data
    this.currentPage=1;
    })
    .catch((err)=>{
      console.log(err)
    })
    },
  //查看
  handleClick(row) {
        // console.log(row.id);
        this.axios({
          methods:'get',
          url:'/refund/'+row.id,
          
        })
        .then((res)=>{
          console.log(res.data.data)
          this.viewData={}
          this.viewData=res.data.data;
          this.viewData.applyTime=this.goTime(res.data.data.applyTime)
          this.viewData.refundStatus=this.getRefundStatus(res.data.data.refundStatus)
        })
        .catch((err)=>{
          console.log('/healthData',err)
        })
      },
      
  //table
    getRefundStatus(value){
        if(value==0){
          return '已同意'
        }else if(value==1){
          return '已拒绝'
        }else {
          return '待处理'
        }
      },
 //时间格式化
      goTime(val) {
      var timestamp4 = new Date(val);
      //利用拼接正则等手段转化为yyyy-MM-dd hh:mm:ss 格式
      return timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8); 
  },
     //子组件传入pagesize 分页
    getPagesize(val) {
      this.pagesize = val;
        //页面更新
      this.update()
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
        //页面更新
      this.update()
    },
  
   
  },
};
</script>

<style lang="less" scoped>


</style>